<template>
  <div class="formL-product-info-view">

    <el-form
      label-position="right"
      label-width="110px"
      :inline="true"
    >

      <el-row>

        <el-col :span="8">
          <el-form-item label="产品名称:">
            <el-link v-if="datas.productInfoDetail" style="display: flex;align-items: center" :underline="false" type="primary" @click="onClick">{{ datas.productInfoDetail.productPopularName }}</el-link>

          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="批准文号:">
            <span v-if="datas.productInfoDetail">{{ datas.productInfoDetail.approvalNumber }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="包装规格:">
            <span v-if="datas.productInfoDetail">{{ datas.productInfoDetail.packSpecs }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="市场价:">
            <span v-if="datas.productInfoDetail">{{ datas.productInfoDetail.marketPrice }}元</span>
            <span v-if="datas.productInfoDetail">/{{ getLabel('sell_unit',datas.productInfoDetail.sellUnit) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="终端价:">
            <el-link style="display: flex;align-items: center" :underline="false" type="primary" @click="productPriceClick">
              {{ datas.terminalPrice }}元
              <span v-if="datas.productInfoDetail">/{{ getLabel('sell_unit',datas.productInfoDetail.sellUnit) }}</span>
            </el-link>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="准入模式:">
            {{ getLabel('app_mode', datas.terminalType) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="关联招商计划:">

            <el-link v-if="datas.planId" style="display: flex;align-items: center" :underline="false" type="primary" @click="planClick">
              {{ datas.planName }}
            </el-link>

          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

  </div>

  <!-- 产品终端价详情 -->
  <detail-drawer
    ref="detailDrawer"
    :size-width="1000"
    custom-title
  >
    <template #title>
      <span>产品终端价 - {{ datas.priceNumber }}</span>
    </template>
    <template #contents>

      <terminal-price :id="datas.productPriceId" />

    </template>
  </detail-drawer>

  <!-- 产品详情 -->
  <detail-drawer
    ref="productDrawer"
    :size-width="1000"
    custom-title
  >
    <template #title>
      <span>产品 - {{ datas.productInfoDetail.productPopularName }}</span>
    </template>
    <template #contents>

      <product-base-info :id="datas.productInfoDetail.id" />

    </template>
  </detail-drawer>

  <!-- 计划详情 -->
  <detail-drawer
    ref="planDrawer"
    :size-width="1000"
    custom-title
  >
    <template #title>
      <span>招商计划 - {{ datas.planName }}</span>
    </template>
    <template #contents>

      <plan-info :id="datas.planId" />

    </template>
  </detail-drawer>
</template>

<script>
import terminalPrice from '../../../../commonView/detailComponents/product/terminalPrice'
import planInfo from '../../../../commonView/detailComponents/business/planInfo'
import productBaseInfo from '../../../../commonView/detailComponents/product/productBaseInfo'
import {defineComponent, getCurrentInstance, inject, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'ProductInfoView',
  components: { productBaseInfo, planInfo, terminalPrice },
  props: {
    datas: {
      type: Object,
      default: {},
    }
  },
  setup(props, { emit }) {
    const api = inject('api')
    const currentInstance = getCurrentInstance()

    const data = reactive({
      detailDrawer: null,
      priceDetailRow: {},
      productDrawer: null,
      planDrawer: null,
    })

    const productPriceClick = () => {
      // api.product.PRODUCT_PRICE_DETAIL(props.datas.productPriceId).then(res=>{
      //     if (!res.code){
      //         data.priceDetailRow = res.data.productPriceStrategy
      //         data.detailDrawer.open()
      //     }else {
      //         currentInstance.proxy.customMessage({
      //             type:'error',message:res.msg
      //         })
      //     }
      // })
      data.detailDrawer.open()
    }

    const onClick = () => {
      data.productDrawer.open()
    }

    const planClick = () => {
      data.planDrawer.open()
    }

    return {
      ...toRefs(data),

      productPriceClick,
      onClick,
      planClick
    }
  }
})

</script>

<style lang="scss" scoped>
    @import "@/style/basics.scss";
    .formL-product-info-view{
        .mainColor{
            color:$active-color
        }
    }
</style>
